<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app-33">
        <router-link to="/login/101">登录t1</router-link><br />
        <router-link to="/index/102">首页t2</router-link><br />
        <router-view></router-view>
    </div>

    <script type="text/javascript">
        const t1 = {
            template: `<div style="width: 400px; height: 200px; border: blue 1px solid" >
                    登录t1:{{$route.params.id}}
                    </div>`
        };
        const t2 = {
            props:["id"],
            template: `<div style="width: 400px; height: 200px; border: blue 1px solid" >
                    首页t2:{{id}}
                    </div>`
        };
        // 2. 定义路由
        const my_router = new VueRouter({
           routes: [
               {
                   path: '/login/:id',
                   component: t1
               },
               {
                   path: '/index/:id',
                   component: t2,
                   props: true
               }
           ]
        });
        // 3. 引用路由
        var vm = new Vue({
           el: '#app-33',
            router: my_router
        });
    </script>

</body>
</html>